<template>
  <div id='p2' :style='size'>
    <chart ref='chart1' :options='options' :style='size' :auto-resize='true'></chart>
  </div>
</template>

<script>
  export default {
    name: 'p2',
    data () {
      return {
        options: {},
        colorList: ['#afa3f5', '#00d488', '#3feed4', '#3bafff', '#f1bb4c', '#aff', 'rgba(250,250,250,0.5)'],
        size: {
          width: '100%',
          height: '100%'
        },
        unit: '',
        title: ''
      }
    },
    methods: {
      getColor (params) {
        return this.colorList[params.dataIndex]
      }
    },
    computed: {},
    mounted () {
      this.options = {
        title: {
          text: '2018年土壤单项污染指数评价结果',
          x: 'center',
          textStyle: {
            color: '#FFF',
            fontSize: 15
          },
          top: '0%'
        },
        grid: {
          top: '30%',
          left: '5%',
          right: '5%'
        },
        xAxis: {
          type: 'value',
          show: false

        },
        yAxis: {
          type: 'category',
          show: false,
          axisTick: {
            show: false
          }
        },
        series: [{
          type: 'bar',
          name: '彰武县五峰镇地下90cm层超标',
          data: [14.2],
          stack: 'income',
          barWidth: '50%',
          label: {
            normal: {
              show: true,
              position: 'left',
              offset: [150, 40],
              // color: '#fff',
              formatter: '{a}\n{c}%'
            }
          },
          itemStyle: {
            normal: {
              color: '#ffd700',
              barBorderRadius: [5, 0, 0, 5]

            }
          }
        }, {
          type: 'bar',
          name: '其他未超标点位',
          data: [85.7],
          stack: 'income',
          barWidth: 13,
          label: {
            normal: {
              show: true,
              position: 'left',
              offset: [350, 40],
              formatter: '{a}\n{c}%'
            }
          },

          itemStyle: {
            normal: {
              color: '#40e0d0',
              barBorderRadius: [0, 5, 5, 0]

            }

          }
        }]
        // , {
        //   type: 'bar',
        //   name: '本科以上',
        //   data: [50],
        //   stack: 'income',
        //   barWidth: 13,
        //   label: {
        //     normal: {
        //       show: true,
        //       position: 'left',
        //       offset: [40, 40],
        //       formatter: '{a}\n{c}%'
        //     }
        //   },
        //
        //   itemStyle: {
        //     normal: {
        //       color: '#14f6cf',
        //       barBorderRadius: [0, 5, 5, 0]
        //
        //     }
        //
        //   }
        // }]

        // title: {
        //   subtext: '超标占比',
        //   x: 'center',
        //   y: '47%',
        //   textStyle: {
        //     fontSize: 18,
        //     fontWeight: 'normal',
        //     color: ['#333']
        //   },
        //   subtextStyle: {
        //     color: '#f1bb4c',
        //     fontSize: 16
        //   }
        // },
        // grid: {
        //   bottom: 150,
        //   left: 0,
        //   right: '10%'
        // },
        // legend: {
        //   show: false,
        //   orient: 'vertical',
        //   top: 'middle',
        //   right: '5%',
        //   textStyle: {
        //     color: '#f2f2f2',
        //     fontSize: 25
        //
        //   },
        //   icon: 'roundRect'
        // },
        // series: [
        //   // 主要展示层的
        //   {
        //     radius: ['29%', '59%'],
        //     center: ['50%', '50%'],
        //     type: 'pie',
        //     itemStyle: {
        //       normal: {
        //         color: this.getColor
        //       }
        //     },
        //     labelLine: {
        //       normal: {
        //         show: true,
        //         length: 35,
        //         length2: 100,
        //         lineStyle: {
        //           color: '#d3d3d3'
        //         },
        //         align: 'right'
        //       },
        //       color: '#000',
        //       emphasis: {
        //         show: true
        //       }
        //     },
        //     label: {
        //       normal: {
        //         formatter: function (params) {
        //           var str = ''
        //           switch (params.name) {
        //           case '彰武县五峰镇地下90cm层':
        //             str = '彰武县五峰镇地下90cm层超标,' + params.value + '%'
        //             break
        //           case '其他未超标监测点位':
        //             str = '其他未超标监测点位' + params.value + '%'
        //             break
        //           }
        //           return str
        //         },
        //         padding: [0, -90],
        //         height: 35,
        //         rich: {
        //           a: {
        //             width: 38,
        //             height: 38,
        //             lineHeight: 50,
        //
        //             align: 'left'
        //           },
        //           b: {
        //             width: 29,
        //             height: 45,
        //             lineHeight: 50,
        //             align: 'left'
        //           },
        //           c: {
        //             width: 34,
        //             height: 33,
        //             lineHeight: 50,
        //
        //             align: 'left'
        //           },
        //           d: {
        //             width: 34,
        //             height: 44,
        //             lineHeight: 50,
        //             align: 'left'
        //           },
        //           e: {
        //             width: 38,
        //             height: 30,
        //             lineHeight: 50,
        //             align: 'left'
        //           },
        //           nameStyle: {
        //             fontSize: 16,
        //             color: '#555',
        //             align: 'left'
        //           },
        //           rate: {
        //             fontSize: 20,
        //             color: '#1ab4b8',
        //             align: 'left'
        //           }
        //         }
        //       }
        //     },
        //     data: [
        //       {},
        //       {value: 14.2, name: '彰武县五峰镇地下90cm层'},
        //       {value: 85.7, name: '其他未超标监测点位'}]
        //   },
        //   // 边框的设置
        //   {
        //     radius: ['54%', '59%'],
        //     center: ['50%', '50%'],
        //     type: 'pie',
        //     label: {
        //       normal: {
        //         show: false
        //       },
        //       emphasis: {
        //         show: false
        //       }
        //     },
        //     labelLine: {
        //       normal: {
        //         show: false
        //       },
        //       emphasis: {
        //         show: false
        //       }
        //     },
        //     animation: false,
        //     tooltip: {
        //       show: false
        //     },
        //     itemStyle: {
        //       normal: {
        //         color: 'rgba(250,250,250,0.5)'
        //       }
        //     },
        //     data: [{
        //       value: 1
        //     }]
        //   }
        // ]
      }
      window.addEventListener('resize', function () {
        this.$refs.chart1.resize()
      })
    }
  }
</script>
<style>
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>
